<template>
  <div class="shop_class_app">
    <!-- 顶部广告部分 -->
    <tabar />
    <itembar />
    <shopLogoBar />
    <!-- 商品分类主体部分 -->
    <div class="shop_class_box">
      <!-- 左边导航栏 -->
      <div class="shop_class_box_left">
        <div class="box_left_1"></div>

        <el-col :span="12">
          <el-menu
            default-active="0"
            class="box_left_1"
            @open="handleOpen"
            @close="handleClose"
          >
            <el-submenu index="0">
              <template slot="title">
                <svg
                  t="1652857233546"
                  class="icon_location"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="10705"
                  width="20"
                  height="20"
                >
                  <path
                    d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z"
                    fill="#FDEBED"
                    p-id="10706"
                  ></path>
                  <path
                    d="M640 486.4h-102.4v-102.4c0-56.32 46.08-102.4 102.4-102.4s102.4 46.08 102.4 102.4-46.08 102.4-102.4 102.4zM384 742.4c-56.32 0-102.4-46.08-102.4-102.4s46.08-102.4 102.4-102.4h102.4v102.4c0 56.32-46.08 102.4-102.4 102.4z m-102.4-358.4c0-56.32 46.08-102.4 102.4-102.4s102.4 46.08 102.4 102.4v102.4h-102.4c-56.32 0-102.4-46.08-102.4-102.4z m460.8 256c0 56.32-46.08 102.4-102.4 102.4s-102.4-46.08-102.4-102.4v-102.4h102.4c56.32 0 102.4 46.08 102.4 102.4z"
                    fill="#EC3A4E"
                    p-id="10707"
                  ></path>
                </svg>
                <span>宝贝分类</span>
              </template>

              <el-submenu v-for="(item, index) in types" :key="index">
                <template slot="title">{{ item.name }}</template>
                <el-menu-item
                  v-for="(data, index) in item.second"
                  :key="index"
                  >{{ data.name }}</el-menu-item
                >
              </el-submenu>
            </el-submenu>
          </el-menu>
        </el-col>
      </div>

      <!-- 右边商品部分 -->
      <div class="shop_class_box_right">
        <!-- 商品分类 -->
        <div class="box_right_shop_classation">
          <div class="box_right_shop_classation_bgimg">
            <img :src="shop_backimg" alt="" />
          </div>
          <div class="box_right_shop_classation_query">
            <input
              type="text"
              value="在当前框中搜索本店商品"
              class="box_right_shop_classation_query_input"
            />
          </div>
        </div>
        <!-- 排序 -->
        <div class="box_right_shop_sort">
          <div class="box_right_shop_sort_center">
            <div class="box_right_shop_sort_item1 items_public">综合排序</div>
            <div class="box_right_shop_sort_item items_public">
              销量<svg
                t="1652858515498"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="11666"
                width="9"
                height="9"
              >
                <path
                  d="M841.4 389.7l-329 569.8-329-569.8h178.7V65.6h300.5v324.1z"
                  fill="#748696"
                  p-id="11667"
                ></path>
              </svg>
            </div>
            <div class="box_right_shop_sort_item items_public">
              新品<svg
                t="1652858515498"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="11666"
                width="9"
                height="9"
              >
                <path
                  d="M841.4 389.7l-329 569.8-329-569.8h178.7V65.6h300.5v324.1z"
                  fill="#748696"
                  p-id="11667"
                ></path>
              </svg>
            </div>
            <div class="box_right_shop_sort_item items_public">
              收藏<svg
                t="1652858515498"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="11666"
                width="9"
                height="9"
              >
                <path
                  d="M841.4 389.7l-329 569.8-329-569.8h178.7V65.6h300.5v324.1z"
                  fill="#748696"
                  p-id="11667"
                ></path>
              </svg>
            </div>
            <div class="box_right_shop_sort_item items_public">
              价格
              <svg
                t="1652874913174"
                class="icon_maoney"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="12580"
                width="15"
                height="15"
              >
                <path
                  d="M718.73545078 589.39849389H305.26454922c-20.36802471 0-32.58883953 13.23921607-22.40482717 23.42322842 15.27601854 16.29441978 197.56983966 206.73545078 206.73545077 215.90106188 11.20241359 12.22081482 35.64404324 10.18401235 45.8280556 0C542.55203706 821.59397555 729.93786436 624.02413589 741.14027795 612.82172231c10.18401235-11.20241359-3.05520371-22.40482718-22.40482718-23.42322842zM305.26454922 434.60150611h413.47090156c19.34962348 0 32.58883953-12.22081482 22.40482717-23.42322842-11.20241359-11.20241359-198.5882409-208.77225325-206.73545077-216.91946312-9.16561112-10.18401235-33.60724077-11.20241359-45.8280556 0C480.42956171 204.44282693 298.13574057 394.88385793 282.85972205 411.17827769c-10.18401235 10.18401235 2.03680247 23.42322842 22.40482718 23.42322842z"
                  fill="#768696"
                  p-id="12581"
                ></path>
              </svg>
            </div>
            <div class="box_right_shop_sort_item items_public">口碑</div>
            <!-- 价格范围 -->
            <div>
              <input type="number" class="sort_input items_public" />
              <input type="number" class="sort_input items_public" />
            </div>

            <div class="sort_vipshop">
              <input type="checkbox" class="sort_vipshop_checkbox" />
              店铺VIP商品
            </div>

            <!-- 商品分页 -->
            <!-- <div class="box_right_shop_sort_item_page items_public ">  -->
            <div class="box_right_shop_sort_item_page page_i">
              <svg
                t="1652881969281"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="8906"
                width="20"
                height="20"
              >
                <path
                  d="M300.553 158.749c-13.668-13.669-13.668-35.83 0-49.498 13.669-13.668 35.83-13.668 49.498 0L713.6 472.802c21.816 21.815 21.816 57.185 0 79l-363.55 363.551c-13.668 13.668-35.83 13.668-49.498 0s-13.668-35.83 0-49.497l353.554-353.554L300.553 158.75z"
                  fill="#2c2c2c"
                  p-id="8907"
                ></path>
              </svg>
            </div>
            <div class="box_right_shop_sort_item_page page_i">
              <svg
                t="1652882019441"
                class="icon"
                viewBox="0 0 1039 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="9253"
                width="20"
                height="20"
              >
                <path
                  d="M653.740113 919.864407c-9.642185 0-19.284369-3.856874-26.998117-11.570622L256.482109 539.962335c-7.713748-7.713748-11.570621-17.355932-11.570621-26.998117s3.856874-19.284369 11.570621-26.998116L626.741996 113.777778c15.427495-15.427495 38.568738-15.427495 53.996234 0 15.427495 15.427495 15.427495 38.568738 0 53.996233L337.47646 512.964218l343.26177 343.261771c15.427495 15.427495 15.427495 38.568738 0 53.996233-7.713748 5.785311-17.355932 9.642185-26.998117 9.642185z"
                  fill="#2c2c2c"
                  p-id="9254"
                ></path>
              </svg>
            </div>
            <div class="page_num">{{ shops.pagenum }}/{{ shops.pagemax }}</div>
            <!-- </div> -->
          </div>
        </div>
        <!--店铺商品-->
        <div class="box_right_shop_commodity">
          <!-- 商品大图展示 -->

          <div
            class="box_right_shop_commodity_item"
            v-for="(item, index) in shops"
            :key="index"
          >
            <router-link to="/items">
              <img class="shop_commodity_item_img" :src="item.img" alt="" />
              <div class="shop_cimmodity_item_number">¥{{ item.number }}</div>
              <div class="shop_cimmodity_item_title">{{ item.title }}</div>
              <div class="shop_cimmodity_item_volume">
                总销量：{{ item.volume }}+
              </div>
            </router-link>
          </div>
        </div>
      </div>
    </div>

    <bottom />
  </div>
</template>

<script>
import tabar from "@/components/topbar.vue";
import bottom from "@/components/bottom.vue";
import itembar from "@/components/shop_items/shop_items_topbar.vue";
import shopLogoBar from "@/components/shop_items/shop_logo_bar.vue";

export default {
  components: { tabar, bottom, itembar, shopLogoBar },
  data() {
    return {

      shop_backimg: '@/assets/images/shop_classifction/shopback.jpg',
      types: [
        {
          // 一级菜单
          type_id: 1,
          name: "华为手机",
          second: [
            {
              item_id: "1-1",
              name: "meat10",
            },
            {
              item_id: "1-1",
              name: "1-123",
            },
          ],
        },
        {
          // 一级菜单

          type_id: 1,
          name: "华为电脑",
          second: [
            {
              item_id: "1-1",
              name: "mack",
            },
            {
              item_id: "1-1",
              name: "1-123",
            },
          ],
        },
      ],
      shops: [
        {
          shop_backimg: "/src/assets/images/shop_classifction/shopback.jpg",
          pagenum: "1",
          pagemax: "4",
          img: "/assets/images/shop_classifction/shopitem.jpg",
          number: "17799.00",
          title: " HUAWEI/华为Mate X2 新款5G折叠手机麒麟9000芯片折叠屏华为官",
          volume: "2万",
        },
      ],
    };
  },
  created() {
    var sop = this.shops;
    var sopjson = JSON.stringify(sop);
    console.log(sopjson);
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style>
/* 商品分类 */
.box_right_shop_classation_query_input {
  height: 22px;
  width: 150px;
  display: block;
  margin: 0 auto;
  /* outline: none; */
  line-height: 30px;
  font-size: 10px;
  border-radius: 50px;
  color: #ccc;
  border-color: #f1edec;
  /*   border-style: unset; 去掉输入框边框线 */
}

.box_right_shop_classation_query {
  height: 30px;
  width: 100%;
  border: 1px solid #ccc;
  background-color: #f1edec;
}
.box_right_shop_classation_bgimg {
  height: 300px;
  width: 100%;
}
.box_right_shop_classation {
  width: 100%;
  height: 330px;
}

.shop_cimmodity_item_volume {
  margin-top: 6px;
  color: #999;
  font-size: 12px;
  font-family: arial, verdana, sans-serif;
}
.shop_cimmodity_item_title {
  width: 180px;
  color: #666;
  font-size: 12px;
  font-family: arial, verdana, sans-serif;
}

.shop_cimmodity_item_number {
  margin: 10px 0px;
  color: #cc0000;
  font-family: arial, verdana, sans-serif;
  font-size: 14px;
  font-weight: 700;
}

.shop_commodity_item_img {
  width: 180px;
  height: 180px;
}

.box_right_shop_commodity_item {
  float: left;
  width: auto;
  height: 300px;
  margin-right: 23px;
  margin-top: 22px;
  /* background-color: bisque; */
}

/* 商品列表 */
.box_right_shop_commodity {
  width: calc(100% + 60px);
  height: auto;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}

/* 商品排序 样式 */
.box_right_shop_sort_item_page {
  float: right;
  width: 22px;
  height: 22px;
  line-height: 30px;
  border: 1px solid #ccc;
  background-color: #f1edec;
}
.page_num {
  float: right;
  font-size: 15px;
  margin-top: 2px;
  margin-right: 5px;
}

.sort_input {
  float: left;
  outline: none;
}

.sort_vipshop {
  float: left;
  font-size: 13px;
}

.sort_vipshop_checkbox {
  margin-left: 10px;
}

/* 排序盒子公共样式 */
.box_right_shop_sort_item_page:active {
  background-color: #ef3c3c;
}

.box_right_shop_sort_item_page:focus {
  background-color: #ef3c3c;
}

.items_public:active {
  background-color: #ef3c3c;
}
.items_public:focus {
  background-color: #ef3c3c;
}
.items_public {
  float: left;
  width: 50px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  font-size: 12px;
  border: 1px solid #ccc;
  background-color: white;
  color: #000;
}

.box_right_shop_sort_item2 {
  width: 50px;
}

.icon_maoney {
  margin-top: 2px;
}
.box_right_shop_sort_item1 {
  width: 68px;
  background-color: #f1edec;
  color: #000;
}

.icon_location {
  padding: 10px;
}

/*排序设置居中 */
.box_right_shop_sort_center {
  width: 100%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 排序 */
.box_right_shop_sort {
  margin-top: 10px;
  height: 34px;
  width: 100%;
  background: #faf9f9;
  color: #806f66;
  position: relative;
}

/* 左边导航栏 */
.box_left_1 {
  width: 190px;
  height: auto;
  margin-bottom: 20px;
  border: 1px solid #ccc;
}

/* 右边 */
.shop_class_box_right {
  width: 790px;
  height: auto;
}

/* 右边 */
.shop_class_box_left {
  width: 200px;
  height: auto;
}

.shop_class_box {
  width: 1000px;
  height: auto;
  margin: 0 auto;

  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.shop_class_app {
  width: 100%;
  height: 100%;
}
/* .shop_class_top {
  width: auto;
  height: 260px;
  background-color: rgb(171, 137, 202);
} */
</style>